<template>
  <div class="bidding-item-main">
    <div class="flx-row-s-c">
      <h3 class="title" :title="info.domainName">{{ info.domainName }}</h3>
      <i class="hot" v-if="info.isTab == 1"></i>
    </div>
    <div class="flx-row-bw-s middle-area">
      <div class="flx-col-s-s">
        <span
          class="content"
          style="margin-bottom: 8px"
          :title="info.meaning != null ? info.meaning : ''"
          >{{ info.meaning != null ? info.meaning : "" }}</span
        >
        <span>当前价格</span>
        <span class="money">{{ info.price }}</span>
      </div>
      <i class="line"></i>
      <div class="flx-col-s-e">
        <div class="flx-row-s-c" style="margin-bottom: 10px">
          <span class="c-g f-14">剩余</span>
          <span class="time">{{ info.endTimeStr }}</span>
          <!-- <span class="time day" v-if="day > 0">{{ day }}</span>
          <span class="time hour" v-if="hour > 0">{{ hour }}</span>
          <span class="time min" v-if="day <= 0">{{ min }}</span>
          <span class="time sec" v-if="hour <= 0">{{ sec }}</span> -->
        </div>
        <div @click="toDetail" class="button">参与竞价</div>
      </div>
    </div>
    <div class="tips-area flx-row-s-c" v-if="info.barrageText">
      <div
        class="flx-row-s-c"
        :class="{ 'scroll-action': scroll }"
        :style="{ animationDuration: animationDuration }"
      >
        <span :title="info.tips" :ref="'tip' + index">{{
          info.barrageText
        }}</span>
        <span :title="info.tips" v-if="scroll">{{ info.barrageText }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { showtime } from "@/utils/format";
import spin from "../spin/spin.vue";
export default {
  components: { spin },
  name: "VipBiddingitem",
  props: {
    info: {
      type: Object,
    },
    index: {
      type: Number,
    },
  },
  watch: {
    info: {
      immediate: true,
      deep: true,
      handler(newValue) {
        this.$nextTick(function () {
          // this.setShowTimeInterval(newValue.endTime);
          if (this.info.barrageText) {
            let width = this.$refs["tip" + this.index].clientWidth;
            if (width > 228) {
              this.scroll = true;
              this.animationDuration = width / 30 + "s";
            }
          }
        });
      },
    },
  },
  mounted() {},
  data() {
    return {
      scroll: false,
      animationDuration: "",
      day: 0, // 剩余天数
      hour: 0, // 剩余小时
      min: 0, // 剩余分钟
      sec: 0, // 剩余秒数
      countDownInterval: null, // 倒计时定时器
    };
  },
  methods: {
    setShowTimeInterval(Time) {
      this.countDownInterval = setInterval(() => {
        let left = showtime(Time);
        if (left.day < 0) {
          clearInterval(this.countDownInterval);
          return;
        }
        this.day = left.day;
        this.hour = left.hour < 10 ? `0${left.hour}` : left.hour;
        this.min = left.min < 10 ? `0${left.min}` : left.min;
        this.sec = left.sec < 10 ? `0${left.sec}` : left.sec;
      }, 1000);
    },
    toDetail() {
      window.open(`/bidding/${this.info.id}`, "_blank");
    },
  },
  beforeDestroy() {
    clearInterval(this.countDownInterval);
  },
};
</script>

<style lang="scss" scoped>
.bidding-item-main {
  width: 264px;
  height: 165px;
  background: #ffffff;
  border: 1px solid #eeeded;
  border-radius: 5px;
  padding: 14px 17px 0;
  transition: box-shadow 0.3s, transform 0.3s;
  color: rgba($color: #373737, $alpha: 0.6);

  &:hover {
    @include b-sh;
    transform: translate(0, -7px);
  }

  .title {
    display: block;
    text-align: left;
    max-width: 100%;
    font-size: 20px;
    font-weight: 400;
    line-height: 26px;
    @include f-ell-sin;
    color: #3d3d3d;
  }

  .middle-area {
    width: 100%;
    margin-top: 10px;
    & > div {
      width: 100%;
      overflow: hidden;
    }

    .content {
      display: inline-block;
      @include f-ell-sin;
      width: 100%;
      text-align: left;
    }

    .money {
      color: #f9521f;
      font-size: 20px;
      font-weight: 600;
      &::before {
        content: "￥";
        font-size: 14px;
        font-weight: 400;
      }
    }

    .time {
      color: #f9521f;
      font-size: 14px;
    }
    .day::after {
      content: "天";
    }
    .hour::after {
      content: "小时";
    }
    .min::after {
      content: "分";
    }
    .sec::after {
      content: "秒";
    }

    .line {
      display: block;
      width: 0;
      height: 73px;
      margin: 0 10px;
      border-right: 1px solid rgba($color: #616161, $alpha: 0.2);
    }

    .button {
      display: block;
      @include size(96px, 42px);
      color: rgba($color: #3d3d3d, $alpha: 0.9);
      border: 1px solid rgba($color: #616161, $alpha: 0.2);
      @include btn-s(null, 42px, 5px);
      transition: all 0.3s;

      &:hover {
        color: rgba($color: #ffffff, $alpha: 0.9);
        border-color: #f9521f;
        background-color: #f9521f;
      }
    }
  }

  .hot {
    display: inline-block;
    @include size(19px, 27px);
    margin-left: 6px;
    flex-shrink: 0;
    @include bg-setting("hot2");
  }

  .tips-area {
    margin-top: 5px;
    overflow: hidden;
    span {
      padding-left: 22px;
      font-size: 12px;
      color: #f9521f;
      @include bg-setting("tips", 14px 16px, left 0);
      white-space: nowrap;
      line-height: 16px;
      display: inline-block;
      margin-right: 30px;
    }
  }
}
</style>
